<template>
	<div class="layout">
		<div class="layout-wrap">
			<div class="y-wrap">
				<div class="cell" v-for="(y, index) in layout.y" :key="y">y-{{ index }}</div>
			</div>
			<div class="table">
				<div class="table-y" v-for="(itemY, index) in layout.data" :key="index">
					<div class="table-x" v-for="(itemX, indexX) in itemY" :key="indexX">
						{{ itemX.x }}-{{ itemX.y }}
					</div>
				</div>
			</div>
		</div>
		<div class="x-wrap">
			<div class="cell" v-for="(x, index) in layout.x" :key="x">x-{{ index }}</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { useCool } from "/@/cool";

const { service } = useCool();

const layout = reactive<any>({
	x: 24,
	y: 12,
	data: [],
	init: () => {
		// 生成表格
		for (let y = 0; y < layout.y; y++) {
			layout.data[y] = [];
			for (let x = 0; x < layout.x; x++) {
				layout.data[y][x] = {
					x,
					y
				};
			}
		}

		console.info("layout.data", layout.data);
	}
});

onMounted(() => {
	layout.init();
});
</script>

<style lang="scss" scoped>
.layout {
	padding: 20px;
	&-wrap {
		display: flex;
		align-items: flex-start;
		.y-wrap {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			margin: 5px 10px;
			.cell {
				height: 60px;
				line-height: 60px;
				margin: 5px 0;
				border: 1px solid #eee;
			}
		}
	}
	.table {
		border: 1px solid red;
		&-y {
			display: flex;
			align-items: center;
			margin: 10px 0;
		}
		&-x {
			width: 80px;
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10px;
			border: 1px solid #eee;
		}
	}
	.x-wrap {
		display: flex;
		padding-left: 66px;
		.cell {
			width: 80px;
			text-align: center;
			margin: 0 10px;
		}
	}
}
</style>
